<template>
  <div class="project-manager">
    <el-steps
      :active="active"
      finish-status="success"
      simple
      style="margin-bottom: 10px"
    >
      <el-step title="新建工程" />
      <el-step title="模块管理" />
    </el-steps>

    <new-project-vue
      v-if="active === 0"
      @getProjectBase="getProjectBase"
      ref="projectBaseFormRef"
    ></new-project-vue>

    <module-manager-vue
      v-if="active === 1"
      :arVersion="projectBase?.arVersion"
      @getProjectModules="getProjectModules"
    ></module-manager-vue>

    <div class="footer">
      <el-button
        type="primary"
        style="margin-top: 12px"
        @click="next"
        v-show="active === 0"
      >
        下一步
      </el-button>
      <el-button-group v-show="active === 1">
        <el-button style="margin-top: 12px" @click="pre">上一步</el-button>
        <el-button type="primary" style="margin-top: 12px" @click="finish"
          >完成</el-button
        >
      </el-button-group>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from '@/render/store/index'
import newProjectVue from './cmps/new-project.vue'
import moduleManagerVue from './cmps/module-manager.vue'
import { IProjectItemState } from '@/render/store/projects/types'
import { ElMessage } from 'element-plus'
import emitter from '@/render/utils/mitt'

export default defineComponent({
  emits: ['getProjectManagerVisible'],
  components: {
    newProjectVue,
    moduleManagerVue
  },
  setup() {
    const store = useStore()
    let active = ref(0)
    let projectBase = ref<IProjectItemState>()
    let projectModules = ref()
    const projectBaseFormRef = ref()

    const pre = () => {
      active.value = 0
    }
    const next = () => {
      projectBaseFormRef.value.projectBaseRef.validate((valid: boolean) => {
        if (valid) {
          projectBaseFormRef.value.submitProjectBase()
          active.value = 1
        }
      })
    }
    const finish = () => {
      const submitProject = () => {
        const data = {
          name: projectBase.value?.name,
          inputUrl: projectBase.value?.inputUrl,
          outputUrl: projectBase.value?.outputUrl,
          arVersion: projectBase.value?.arVersion,
          modules: projectModules.value
        }
        store
          .dispatch('projects/createNewProject', data)
          .then((res) => {
            emitter.emit('close-newproject', 'emitter')
            ElMessage({
              message: res,
              type: 'success'
            })
            active.value = 0
          })
          .catch((error) => {
            ElMessage.error(error)
            active.value = 0
          })
      }
      submitProject()
    }
    const getProjectBase = (newprojectBase: any) => {
      projectBase.value = newprojectBase
    }
    const getProjectModules = (newprojectModules: any) => {
      projectModules.value = newprojectModules
    }

    return {
      active,
      projectBase,
      projectBaseFormRef,
      pre,
      next,
      finish,
      getProjectBase,
      getProjectModules
    }
  }
})
</script>

<style scoped lang="less">
.footer {
  & > .el-button {
    width: 100%;
  }
  .el-button-group {
    width: 100%;
    .el-button {
      width: 50%;
    }
  }
}
</style>
